<template>
  <el-dialog
    width="80%"
    @open="mixinOpen"
    @close="handleClose"
    title="详情"
    :visible="dialogVisible"
  >
    <el-form :model="detailData" label-width="80px" label-position="left">
      <h1>用户信息</h1>
      <hr />
      <el-row>
        <el-col :span="8">
          <el-form-item label="角色账号">
            {{ detailData.userUserName }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="角色昵称">
            {{ detailData.userNickName }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="用户创建时间">
            {{ detailData.userCreatedAt | timeFilter }}
          </el-form-item>
        </el-col>
      </el-row>
      <h1>角色信息</h1>
      <hr />
      <el-row>
        <el-col :span="8">
          <el-form-item label="用户名">
            {{ detailData.roleName }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否是学区房">
            {{ !!detailData.roleIsSchool ? "是" : "否" }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="角色权限">
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                v-for="item in authLists"
                :key="item.id"
                :label="item.id"
                disabled
                >{{ item.name }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button @click="handleClose">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import detailDialog from "../../../mixins/detailDialog";
import axios from "axios";

export default {
  name: "detailDialog",
  mixins: [detailDialog],
  data() {
    return {
      detailData: {
        userUserName: "",
        userNickName: "",
        userCreatedAt: "",
        roleName: "",
        roleIsSchool: "",
        roleAuth: ""
      },
      getDetailUrl: "/api/userAndRole/userAndRole",
      authLists: [],
      checkList: [],
      auth: ""
    };
  },
  async mounted() {
    const {
      data: { errno, message, data }
    } = await axios.get("/api/menu/menu/all");
    if (!errno) {
      this.authLists = data;
    } else {
      this.$message({ type: "error", message });
    }
  },
  methods: {
    initCheckList() {
      if (this.detailData.roleAuth) {
        if (this.detailData.roleAuth === "all") {
          this.checkList = this.authLists.map(item => +item.id);
        } else {
          this.checkList = this.detailData.roleAuth
            .split(",")
            .map(item => +item);
        }
      }
    },
    async mixinOpen() {
      await this.handleOpen();
      this.initCheckList();
    }
  }
};
</script>

<style scoped></style>
